<template>
  <div class="business-container">
    <header>
      <div class="hd-left">
        <van-search v-model="goodsName"
                    placeholder="请输入搜索关键词"
                    shape="round"
                    show-action
                    @search="search">
          <div slot="action"
               @click="search">搜索</div>
        </van-search>
      </div>
      <div class="hd-right">
        <van-button type="info"
                    size="small"
                    round
                    @click="addGoods(id)">增加</van-button>
      </div>
    </header>
    <main>
      <table>
        <thead>
          <tr>
            <th>序号</th>
            <th>商品名</th>
            <th>展示</th>
            <th>价格</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(item, index) in goodsList"
              :key="index">
            <td>{{index+1}}</td>
            <td>{{item.title}}</td>
            <td>
              <img :src="item.imgs[0]">
            </td>
            <td>{{item.new_price}}元</td>
            <td>
              <van-button type="primary"
                          size="mini"
                          @click="editGoods(item._id)">修改</van-button>
              <van-button type="warning"
                          size="mini"
                          @click="delGoods(item._id)">删除</van-button>
            </td>
          </tr>
        </tbody>
      </table>
    </main>
  </div>
</template>

<script>
import { Toast, Dialog } from 'vant'
export default {
  data() {
    return {
      goodsName: '',
      id: this.$route.query._id,
      goodsList: []
    }
  },
  created() {
    this.getGoodsList()
  },
  methods: {
    // 增加商品
    addGoods(uid) {
      this.$router.push({ path: 'business/addGoods', query: { uid } })
    },
    // 删除商品
    delGoods(id) {
      Dialog.confirm({
        message: '是否真的删除?'
      }).then(() => {
        this.axios.get('/goods/delGoods', { params: { _id: id } }).then(res => {
          Toast(res.data.msg)
          if (res.data.code == 1) {
            location.reload()
          }
        })
      }).catch(() => { })
    },
    // 修改商品
    editGoods(_id) {
      this.$router.push({ path: 'business/editGoods', query: { _id } })
    },
    // 搜索
    search() {
      this.getGoodsList()
    },
    // 获取商品列表
    getGoodsList() {
      let params = this.goodsName == '' ? { uid: this.id } : { uid: this.id, title: this.goodsName }
      this.axios.get('/goods/getGoodsList', { params }).then(res => {
        if (res.data.code == 0) {
          Toast(res.data.msg)
          this.goodsList = ''
        } else if (res.data.code == 1) {
          this.goodsList = res.data.goodsList
        }
      })
    }
  }
}
</script>

<style lang="scss">
.business-container {
  header {
    display: flex;
    justify-content: space-between;
    padding: 0 0.5rem;
    .hd-right {
      display: flex;
      margin-right: 0.3rem;
      align-items: center;
    }
  }
  main {
    table {
      width: 100%;
      text-align: center;
      border-collapse: collapse;
      tr {
        border-bottom: 1px solid #000;
        height: 0.8rem;
      }
      img {
        width: 0.6rem;
        height: 0.6rem;
        vertical-align: middle;
      }
    }
  }
}
</style>